<template lang="">
    <div class="addGoods">
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="menu">
                    <div class="title">产品类型列表</div>
                    <div class="tree">
                        <GoodsTree @changeTree="changeTree"></GoodsTree>
                    </div>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="content">
                    <div class="subTitle">{{title}}商品</div>
                    <div class="wrapper">
                        <!-- 
                            el-form 
                                :model="ruleForm" 表单数据 object
                                :rules="rules" 校验规则
                                ref="ruleForm" 获取组件form组件 dom
                                label-width="100px" 标题占据宽度
                            el-from-item
                                label="活动名称"  标题
                                prop="name"      字段标识---调用element-ui内置方法操作  必须写prop
                         -->
                        <el-form :model="goodsForm" :rules="rules" ref="goodsForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="所属分类" prop="category">
                                <span class="category">{{goodsForm.category}}</span>
                            </el-form-item>
                            <el-form-item label="商品名称" prop="title">
                                <el-input v-model="goodsForm.title"></el-input>
                            </el-form-item>
                            <el-form-item label="商品价格" prop="price">
                                <el-input v-model="goodsForm.price"></el-input>
                            </el-form-item>
                            <el-form-item label="商品数量" prop="num">
                                <el-input v-model="goodsForm.num"></el-input>
                            </el-form-item>
                            <el-form-item label="商品卖点" prop="sellPoint">
                                <el-input v-model="goodsForm.sellPoint"></el-input>
                            </el-form-item>
                            <el-form-item label="上传图片" prop="image">
                                <GoodsUpload @sendImage="sendImage" @removeImage="removeImage" :fileList="fileList"/>
                            </el-form-item>
                            <el-form-item label="商品描述" prop="descs">
                                <WangEditor @sendEditor="sendEditor" :editorData="editor" ref="myEditor"/>
                            </el-form-item>
                            <el-form-item label="首页轮播推荐">
                                <el-switch v-model="goodsForm.isBanner"></el-switch>
                            </el-form-item>
                            <el-form-item label="是否推荐商品">
                                <el-switch v-model="goodsForm.recommend"></el-switch>
                            </el-form-item>
                            <el-form-item label="是否上架商品">
                                <el-switch v-model="goodsForm.shelves"></el-switch>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-show="title!=='详情'" type="primary" @click="submitForm('goodsForm')">保存</el-button>
                                <el-button v-show="title!=='详情'" @click="resetForm('goodsForm')">重置</el-button>
                                <el-button @click="goGoodsList()" type="info" plain>取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import GoodsTree from "@/views/GoodsManage/List/GoodsTree.vue";
import GoodsUpload from "./GoodsUpload.vue";
import WangEditor from "./WangEditor.vue";
import { mapState } from 'vuex';

export default {
    components: {
        GoodsTree,
        GoodsUpload,
        WangEditor,
    },
    computed: {
        ...mapState('goods', ['title', 'goodsData']),
    },
    data() {
        return {
            fileList: [],
            editor: '',
            goodsForm: {
                cid: '',
                category: "", // 分类
                title: "", // 名称
                price: "",
                num: "",
                sellPoint: "",
                image: [],
                descs: "",
                isBanner: true,
                recommend: true,
                shelves: true,
            },
            rules: {
                category: [{ required: true }],
                title: [
                    { required: true, message: "请输入商品名称", trigger: "blur" },
                    {
                        min: 2,
                        max: 10,
                        message: "长度在 2 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
                num: [{ required: true, message: "请输入商品数量", trigger: "blur" }],
                date1: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择日期",
                        trigger: "change",
                    },
                ],
                date2: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择时间",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    mounted() {
        if (this.title === '编辑' || this.title === '详情') { // 获取仓库的值
            this.goodsForm = {...this.goodsData };
            // 解析图片字段
            let imgs = JSON.parse(this.goodsData.image);
            this.goodsForm.image = imgs; // 获取vuex里面的数组 转成数组语法
            let arr = [];
            imgs.forEach(item => {
                let obj = {};
                obj.url = item;
                arr.push(obj);
            })
            this.fileList = arr;
            // 富文本编译-------------
            this.editor = this.goodsData.descs;
        }
    },
    methods: {
        goGoodsList() {
            this.$router.push('/goods/list');
        },
        // 获取图片上传成功的回显地址
        sendImage(url) {
            this.goodsForm.image.push(url);
        },
        removeImage(url) {
            this.fileList = this.fileList.filter(item => {
                return item.url !== url;
            })
            this.goodsForm.image = this.goodsForm.image.filter(item => {
                return item !== url;
            })
        },
        // 获取wangEditor输入的内容的文本信息
        sendEditor(val) {
            this.goodsForm.descs = val;
        },
        // 获取tree节点内容
        changeTree(data) {
            this.goodsForm.category = data.name;
            this.goodsForm.cid = data.cid;
        },
        // 添加商品接口
        async addGoods(params) {
            let res = await this.$api.addGoods(params);
            if (res.data.status === 200) {
                // console.log('添加商品成功', res);
                // 跳转到产品列表界面
                this.$router.push('/goods/list');
                // 信息提示
                this.$message.success('恭喜你，添加商品成功');
            } else {
                // 错误信息提示
                this.$message.error('添加商品失败');
            }
        },
        // 修改商品
        async changeGoods(params) {
            let res = await this.$api.changeGoods(params);
            // console.log('修改结果------', res.data);
            if (res.data.status === 200) {
                // console.log('添加商品成功', res);
                // 跳转到产品列表界面
                this.$router.push('/goods/list');
                // 信息提示
                this.$message.success('恭喜你，编辑商品成功');
            } else {
                // 错误信息提示
                this.$message.error('编辑商品失败');
            }
        },
        // 提交----1.添加功能 2.编辑功能
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // console.log('获取表单的输入信息----', this.goodsForm);
                    let { id, title, cid, category, sellPoint, price, num, descs, image } = this.goodsForm;
                    if (this.title === '添加') {
                        this.addGoods({
                            title, image: JSON.stringify(image), sellPoint, price, cid, category, num, descs
                        })
                    } else {
                        console.log('修改商品');
                        this.changeGoods({
                            id, title, cid, category, sellPoint, price, num, descs, image: JSON.stringify(image)
                        })
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 重置表单
        /*
            1.清空表单数据
                a:调用element-ui提供的方法
                b:手动对数据做初始化
            2.编辑商品
                重置 回夫之前的初始值 vuex仓库
        */
        resetForm(formName) {
            if (this.title === '添加') {
                // a.调用element - ui提供的方法
                this.$refs[formName].resetFields();
                // 手动对数据做初始化
                this.goodsForm = {
                    cid: '',
                    category: "", // 分类
                    title: "", // 名称
                    price: "",
                    num: "",
                    sellPoint: "",
                    image: [],
                    descs: "",
                    isBanner: true,
                    recommend: true,
                    shelves: true,
                },
                // 图片上传组件清空列表
                this.fileList = [];
                // wangEditor清空数据
                // console.log(this.$refs);
                this.$refs.myEditor.clear();
            } else {
                // 编辑功能
                this.goodsForm = {...this.goodsData }; // 不要直接赋值
                // 解析图片字段
                let imgs = JSON.parse(this.goodsData.image);
                this.goodsForm.image = imgs; // 获取vuex里面的数组 转成数组语法
                // let arr = [];
                imgs.forEach(item => {
                    let obj = {};
                    obj.url = item;
                    this.fileList.push(obj);
                })
                console.log(this.fileList);
                // 富文本编译-------------
                this.$refs.myEditor.editor.setHtml(this.goodsData.descs);
            }
        },
    },
};
</script>
<style lang="less" scoped>
.addGoods {
    margin: 10px;
    padding: 10px;
}

.menu {
    border: 1px solid #eee;
    height: 600px;
    background: #fff;

    .title {
        height: 50px;
        line-height: 50px;
        color: #fff;
        background: skyblue;
        padding-left: 10px;
        font-size: 14px;
    }

    .tree {
        padding: 10px 20px;
    }
}

.content {
    min-height: 800px;
    background: #fff;
    font-size: 14px;

    .subTitle {
        padding: 10px;
        background: #eee;
        color: #000;
        font-weight: bold;
    }

    .wrapper {
        padding: 20px;
    }

    .category {
        color: skyblue;
        font-size: 16px;
    }
}
</style>